<script>

  import ChartOne from "@/views/machineLearning/components/ChartOne.vue";
  import ChartTwo from "@/views/machineLearning/components/ChartTwo.vue";
  import ChartMap from "@/views/machineLearning/components/ChartMap.vue";
  import ChartFour from "@/views/machineLearning/components/ChartFour.vue";
  import ChartThree from "@/views/machineLearning/components/ChartThree.vue";
  import ChartFive from "@/views/machineLearning/components/ChartFive.vue";
  import ChartSix from "@/views/machineLearning/components/ChartSix.vue";
  import ChartSeven from "@/views/machineLearning/components/ChartSeven.vue";
  import ChartEight from "@/views/machineLearning/components/ChartEight.vue";
  export default {
    name: 'MachineLearning',
    components: {
    "ChartOne": ChartOne,
    "ChartTwo": ChartTwo,
    "ChartThree": ChartThree,
    "ChartFour": ChartFour,
    "ChartMap": ChartMap,
    "ChartFive": ChartFive,
    "ChartSix": ChartSix,
    "ChartSeven": ChartSeven,
    "ChartEight": ChartEight,
    }
  }
</script>

<template>
  <div class="dashboard">
    <div class="main-content">
      <div class="side-panel">
        <div class="chart-container">
          <ChartOne></ChartOne>
        </div>
        <div class="chart-container">
          <ChartThree></ChartThree>
        </div>
      </div>
      <div class="chart-container center-panel">
            <ChartMap></ChartMap>
      </div>
      <div class="side-panel">
        <div class="chart-container">
            <ChartTwo></ChartTwo>
        </div>
        <div class="chart-container">
          <ChartFour></ChartFour>
        </div>
      </div>
    </div>
    <div class="bottom-charts">
      <div class="chart-container bottom-chart">
          <ChartFive></ChartFive>
      </div>
      <div class="chart-container bottom-chart">
          <ChartSix></ChartSix>
      </div>
      <div class="chart-container bottom-chart">
          <ChartSeven></ChartSeven>
      </div>
      <div class="chart-container bottom-chart">
          <ChartEight></ChartEight>
      </div>
    </div>
  </div>
</template>

<style scoped>

/* 仪表盘布局 */
.dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 10px;
  gap: 10px;
}

.main-content {
  display: flex;
  flex: 1;
  gap: 10px;
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 25%;
}

.center-panel {
  width: 50%;
}

.chart-container {
  backdrop-filter: blur(10px);
  background-color: rgb(59, 57, 57);
  padding: 4px;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-charts {
  display: flex;
  height: 20%;
  gap: 10px;
}

.bottom-chart {
  flex: 1;
}


</style>